<template>
	<el-select ref="select" v-model="checkedValue" v-bind="selectProps" class="person_select" popper-class="person_dropdown">
		<el-option v-for="(item, index) in data" :key="index" :label="item?.userName" :value="item?.id">
			<span class="name">{{ item?.userName }}</span>
			<template v-if="!!item?.filed10">
				<el-button type="text" @click.stop="handleLookLink(item?.filed10)">查看介绍</el-button>
			</template>
		</el-option>
	</el-select>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	props: {
		value: { type: Array, default: () => [] },
		data: { type: Array, default: () => [] },
		multiple: { type: Boolean, default: false },
		placeholder: String
	},
	data() {
		return {
			loading: false,
			checkedValue: !this.multiple ? this.value[0] : this.value,
			selectProps: {
				filterable: true,
				multiple: this.multiple,
				placeholder: this.placeholder
			}
		};
	},
	watch: {
		value(arr) {
			this.checkedValue = !this.multiple ? arr[0] : arr;
		},
		checkedValue(arr) {
			console.log(arr);
			this.$emit('input', !this.multiple ? [arr] : arr);
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		}
	},
	methods: {
		blurEvent() {
			this.$refs['select'].blur();
		},

		handleLookLink(link) {
			window.open(link, '_blank');
		}
	}
};
</script>

<style lang="scss">
.person_dropdown {
	.el-select-dropdown__item {
		display: flex;
		align-items: center;
		span.name {
			width: 100px;
		}
		&.selected::after {
			display: none;
		}
	}

	.el-button {
		color: #606266;
		padding: 4px 0;
		margin-left: 10px;

		&:hover {
			color: var(--primary-hover);
			text-decoration: underline;
		}
	}
}
</style>

<style lang="scss" scoped>
:deep(.person_select) {
	width: 100%;
	.el-input__icon::before {
		content: '\e6e1';
	}
	.is-focus .el-select__caret {
		transform: rotateZ(0);
	}
}
</style>
